<template>
    <div class="app-container">
        <Levelbar></Levelbar>
        <TableLayout form-title="">
            <el-form :model="query" ref="query" :rules="rules" slot="form" label-width="85px" label-position="right" v-collapse="true">
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="省份" prop="provinceId">
                            <province v-model="query.provinceId"></province>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="市区" prop="cityId">
                            <city v-model="query.cityId" :province="query.provinceId"></city>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="区县" prop="areaId">
                            <region v-model="query.areaId" :city="query.cityId"></region>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="学校名称" prop="schoolName">
                            <school v-model="query.schoolName" :provinceId="query.provinceId" :cityId="query.cityId" :areaId="query.areaId" style="width:100%" @change='getClassListFu'></school>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="班级名称" prop="classId">
                            <el-select v-model="query.classId" clearable placeholder="请选择" style="width:100%;">
                                <el-option v-for="item in classList" :key="item.pId" :label="item.sNickName" :value="item.pId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="商品名称" prop="goodsId">
                            <el-select v-model="query.goodsId" placeholder="请选择" style="width:100%;">
                                <el-option v-for="item in goodsList" :key="item.pId" :label="item.sName" :value="item.pId"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col> 
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="时间类型" prop="typeTime">
                            <el-select v-model="query.typeTime" placeholder="请输入" style="width:100%">
                                <el-option label="按天查询" value="0"></el-option>
                                <el-option label="按月查询" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item :label="query.typeTime=='1'?'按月份':'按天查询'" prop="timeDate">
                            <el-date-picker
                                :editable='false'
                                :clearable='false'
                                v-model="query.timeDate"
                                :type="query.typeTime=='1'?'month':'date'"
                                style="width:100%"
                                placeholder="请选择">
                            </el-date-picker>
                        </el-form-item>
                    </el-col> 
                    <el-col :span="8">
                        <el-form-item label="家长手机号" prop="parentPhone">
                            <el-input v-model="query.parentPhone" placeholder="请输入" style="width:100%" :maxlength="11"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="负责人姓名" prop="eID">
                            <el-input v-model="query.principal" placeholder="请输入" style="width:100%" :maxlength="6"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="top-line">
                    <el-button type="primary" class="top-btn" @click="onSubmit('query')">查询</el-button>
                </div>
            </el-form>
            <div class="table-title" slot="table-title">
                <div class="btnPosition">
                    <el-button @click="exportTable()">导出</el-button>
                </div>
            </div>
            <el-table :data="tableData" v-loading="loading" style="width: 100%" border>
                <el-table-column label="时间" width="170" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sCreateTime | isNull}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="商品名称" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sIncrementName  | isNull}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="是否会员打包" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sIsPack == '0'?'否':scope.row.sIsPack == '1'?'是':'否'}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="经销商名称" align="center">
                    <template scope="scope">
                        <span>{{scope.row.orgUserName  | isNull}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="负责人" align="center">
                    <template scope="scope">
                        <span>{{scope.row.userName  | isNull}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="学校" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sSchoolName  | isNull}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="班级" align="center">
                    <template scope="scope">
                        <span>{{ scope.row.fIncrementId==123551?'课堂直播区域':scope.row.fIncrementId==123552?'全校':scope.row.sClassName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="学生姓名" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sPayTargetName  | isNull}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="支付人" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sPayUserName  | isNull}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="家长手机号" align="center">
                    <template scope="scope">
                        <span>{{scope.row.parentPhone  | isNull}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="支付方式" align="center">  
                    <template scope="scope">
                        <span>{{scope.row.sPayType | payType}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="实付金额（元）" align="center">  
                    <template scope="scope">
                        <span>{{scope.row.sMoney  | isNull}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="卡券码" align="center">  
                    <template scope="scope">
                        <span>{{scope.row.sCardCoupons  | isNull}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="购买月数" align="center">  
                    <template scope="scope">
                        <span>{{scope.row.sMonth  | isNull}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="支付状态" align="center">  
                    <template scope="scope">
                        <span>{{scope.row.sStatus=='1'?'支付成功':scope.row.sStatus=='0'?'已退回':'---'}}</span>  
                    </template>
                </el-table-column>
                <el-table-column label="订单号" align="center">  
                    <template scope="scope">
                        <span>{{scope.row.sOrderNum  | isNull}}</span>  
                    </template>
                </el-table-column>
                <el-table-column label="发票信息" align="center">  
                    <template scope="scope">
                        <span v-if="scope.row.sHasBill=='0' || !scope.row.sHasBill">--</span>  
                        <el-button v-if="scope.row.sHasBill=='1'" type="text" class="btn-success" @click="seeBill(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination 
                layout="total, sizes, prev, pager, next, jumper" 
                :total="pageQuery.total" 
                :current-page.sync="pageQuery.currentpage" 
                :page-sizes="config.pageSizes" 
                :page-size="config.pageSize" 
                @size-change="handleSizeChange" 
                @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>

        <!-- 发票 -->
        <bill-detail :dataBill='dataBill'></bill-detail>

    </div>
</template>

<script>
    import moment from 'moment';
    import Levelbar from '../layout/Levelbar';
    import TableLayout from 'components/TableLayout';
    import province from 'components/CascadeRegion/province';
    import city from 'components/CascadeRegion/city';
    import region from 'components/CascadeRegion/region';
    import billDetail from './comps/billDetail';
    import school from 'components/SchoolClasss/school';
    import { pagePayIncrementDetail, getClassList, queryGoodsName } from 'api/serviceManage';
    import { mapGetters, mapState, mapActions } from 'vuex';
    import validate from '@/utils/validate';

    export default {
        name: 'orderDetails',
        components: { Levelbar, TableLayout, province, city, region, billDetail, school},
        data() {
            return { 
                dataBill: {
                    id: '',
                    dialogState: false
                },
                loading: true,  
                loadingChild: false,
                schoolList: [],
                classList: [],
                goodsList: [],
                tableData: [],
                tableChild: [],
                pageQuery: {
                    currentpage: 1,
                    total: 0
                },
                query: {
                    provinceId: '',
                    cityId: '',
                    areaId: '',
                    schoolId: '',
                    schoolName: '',
                    classId: '',
                    goodsId: '',
                    typeTime: '1',
                    timeDate: new Date(),
                    parentPhone: '',
                    principal: ''
                },
                rules: {
                    parentPhone: [...validate.phone()]
                }
            }
        },
        created() {
            this.queryGoodsNameFu();
            this.queryData();
        },
        computed: {
            ...mapState({
                config: state => state.config.table
            }),
            ...mapGetters([
                'token'
            ])
        },
        methods: {
            ...mapActions(['ChangePageSize']),
            handleSizeChange(val) {
                this.pageQuery.currentpage = 1;
                this.ChangePageSize(val);
                this.queryData();
            },
            handleCurrentChange(val) {
                this.pageQuery.currentpage = val;
                this.queryData();
            },
            onSubmit(ruleForm) {
                this.$refs[ruleForm].validate((valid) => {
                    if (valid) {
                        this.pageQuery.currentpage = 1;
                        this.queryData();
                    }
                })
            },
            queryData() {

                let provinceId = this.query.provinceId; // 省id
                let cityId = this.query.cityId; // 市id
                let areaId = this.query.areaId; // 区id
                let fSchoolId = this.query.schoolId;  // 学校id
                let fClassId = this.query.classId; // 班级id
                let fIncrementId = this.query.goodsId; // 服务ID 
                let dateType = this.query.typeTime; // 0：选择天查询  1：选择月查询
                let date = null;
                if (dateType == '0') {
                    date = this.query.timeDate!=''?moment(this.query.timeDate).format('YYYY-MM-DD'):''; // 查询日期或查询的月份，如2017-10-31或2017-10
                } else {
                    date = this.query.timeDate!=''?moment(this.query.timeDate).format('YYYY-MM'):''; 
                }
                // let date = this.query.timeDate!=''?moment(this.query.timeDate).format('YYYY-MM'):''; 
                let parentPhone = this.query.parentPhone; // 家长手机号
                let orgUserName = this.query.principal; // 负责人姓名  
                let userName = ''; // 负责人姓名  
                
                pagePayIncrementDetail(
                    this.pageQuery.currentpage,
                    this.config.pageSize,
                    provinceId, // 省id
                    cityId, // 市id
                    areaId, // 区id
                    fSchoolId, // 学校id
                    fClassId, // 班级id
                    fIncrementId, // 服务ID 
                    dateType, // 0：选择天查询  1：选择月查询
                    date, // 查询日期或查询的月份，如2017-10-31或2017-10
                    parentPhone, // 家长手机号
                    orgUserName, // 负责人姓名       
                    userName
                ).then(res => {
                    this.loading = false;
                    if (res.data.content) {
                        this.tableData = res.data.content.list;
                        this.pageQuery.total = res.data.content.pagination.total;
                    }
                }).catch(() => {
                    this.loading = false;
                });
            },
            exportTable() {

                let provinceId = this.query.provinceId; // 省id
                let cityId = this.query.cityId; // 市id
                let areaId = this.query.areaId; // 区id
                let fSchoolId = this.query.schoolId;  // 学校id
                let fClassId = this.query.classId; // 班级id
                let fIncrementId = this.query.goodsId; // 服务ID 
                let dateType = this.query.typeTime; // 0：选择天查询  1：选择月查询
                let date = null;
                if (dateType == '0') {
                    date = this.query.timeDate!=''?moment(this.query.timeDate).format('YYYY-MM-DD'):''; // 查询日期或查询的月份，如2017-10-31或2017-10
                } else {
                    date = this.query.timeDate!=''?moment(this.query.timeDate).format('YYYY-MM'):''; 
                }
                // let date = this.query.timeDate!=''?moment(this.query.timeDate).format('YYYY-MM'):''; // 查询日期或查询的月份，如2017-10-31或2017-10
                let parentPhone = this.query.parentPhone; // 家长手机号
                let orgUserName = this.query.principal; // 负责人姓名
                let token = this.token; 
               

                window.location.href = `${LOCAL_API.cm}/payIncrementDetail/exportPayIncrementDetail?provinceId=${provinceId}&cityId=${cityId}&areaId=${areaId}&fSchoolId=${fSchoolId}&fClassId=${fClassId}&fIncrementId=${fIncrementId}&dateType=${dateType}&date=${date}&parentPhone=${parentPhone}&orgUserName=${orgUserName}&token=${token}`;           
                // console.log(window.location.href);
                // this.loading = true;  
                // exportPayIncrementDetail(
                //     provinceId, // 省id
                //     cityId, // 市id
                //     areaId, // 区id
                //     fSchoolId, // 学校id
                //     fClassId, // 班级id
                //     fIncrementId, // 服务ID 
                //     dateType, // 0：选择天查询  1：选择月查询
                //     date, // 查询日期或查询的月份，如2017-10-31或2017-10
                //     parentPhone, // 家长手机号
                //     orgUserName, // 负责人姓名   
                //     token,
                // ).then(res => {
                //     this.loading = false;                
                //     window.location.href = `http://192.168.0.210:8080/exue-bos-web/bos/payIncrementDetail/exportPayIncrementDetail?provinceId=${provinceId}&cityId=${cityId}&areaId=${areaId}&fSchoolId=${fSchoolId}&fClassId=${fClassId}&fIncrementId=${fIncrementId}&dateType=${dateType}&date=${date}&parentPhone=${parentPhone}&orgUserName=${orgUserName}&token=${token}`;
                // }).catch(() => {
                //     this.loading = false;
                // });
            },

            // 根据学校Id查询班级
            getClassListFu(schoolId) {
                this.query.classId = '';
                this.classList = [];
                this.query.schoolId = schoolId;
                if (this.query.schoolId) {
                    getClassList(schoolId).then(res => {
                        this.classList = res.data.content;
                    })
                }
            },

            // 获取商品列表
            queryGoodsNameFu() {
                queryGoodsName().then(response => {
                    this.goodsList = [];
                    if (response.data.content) {
                        this.goodsList = response.data.content;
                    }
                    this.goodsList.unshift({ pId: '', sName: '请选择'});
                });
            },
            
            // 查看发票
            seeBill(obj) {
                this.dataBill.id = obj.pId;
                this.dataBill.dialogState = true;
            }
        }

    }
</script>

<style lang="scss" scoped>
    .app-container {
        position: relative;
        padding: 20px 20px 10px;
        $bgcolor: #fff;
        .app-levelbar {
            height: 35px;
        }
    }
</style>

